<template>
  <div class="box">
    <Form :model="sku" :label-width="80">
      <div style="overflow: hidden;">
        <img :src="staticUrl + sku.goodsSkuImagePath" alt="图片" width="108" style="float: left;">
        <div style="float: left;">
          <FormItem label="sku名称：" prop="goodsSkuName">
            <Input v-model="sku.goodsSkuName"/>
          </FormItem>
          <FormItem label="权重(1~100)：" :label-width="100">
            <InputNumber v-model="sku.sortWeight" :min="0" :max="100"/>
          </FormItem>
        </div>
      </div>
      <FormItem label="价格类型：">
        <RadioGroup v-model="sku.discountType" @on-change="discountTypeChange">
          <Radio :label="1">批量折扣</Radio>
          <Radio :label="2">指定价格</Radio>
          <Radio :label="3">一口价</Radio>
        </RadioGroup>
      </FormItem>
    </Form>
    <Form :model="sku" label-position="top" inline>
      <div v-if="discountType === 2" style="position: relative;">
        <FormItem label="成本价（元）">
          <InputNumber v-model="sku.costPrice" :min="0.01"/>
        </FormItem>
        <FormItem v-for="(price, index) in sku.prices" :key="index" :label="setups[index].name + setups[index].branchDiscount + '%'">
          <InputNumber v-model="price.price" :min="0.01"/>
        </FormItem>
        <p class="bottom_tip"><span style="color: #ff9900;">提示：</span><span style="color: #bbbec4;">所有价格单位都为元，后面为该体系折扣百分比</span></p>
      </div>
      <div v-else>
        <FormItem label="成本价（元）">
          <InputNumber v-model="sku.costPrice" :min="0.01"/>
        </FormItem>
        <FormItem label="零售价（元）">
          <InputNumber v-model="sku.retailPrice" :min="0.01"/>
        </FormItem>
      </div>
    </Form>
    <Form>
      <FormItem label="库存类型：">
        <RadioGroup v-model="sku.skuStockType" @on-change="stockTypeChange">
          <Radio :label="1">精准库存，不支持预定</Radio>
          <Radio :label="2">精准库存，支持预定</Radio>
          <Radio :label="3">无限量库存</Radio>
        </RadioGroup>
        <p v-show="skuStockType === 3"><span style="color: #ff9900;">提示：</span><span style="color: #bbbec4;">无限量库存类型不需要设置库存和预警库存</span></p>
      </FormItem>
    </Form>
    <Form :model="sku" label-position="top" inline v-show="skuStockType !== 3">
      <FormItem label="库存">
        <InputNumber v-model="sku.stock" :min="1"/>
      </FormItem>
      <FormItem label="预警库存">
        <InputNumber v-model="sku.warningStock"/>
      </FormItem>
    </Form>
    <Upload action="#" style="float: left;" :before-upload="handleBeforeUpload">
      <Button type="ghost" size="small">更换图片</Button>
    </Upload>
    <Button type="error" size="small" style="float: left;margin-left: 10px;" @click="delSku">删除sku</Button>
    <image-util :fixed-number="[1, 1]" @cropImg="cropImg" ref="crop"></image-util>
  </div>
</template>

<script>
import imageUtil from '../../common/imageUtil'
export default {
  name: 'sku-card',
  components: {
    imageUtil
  },
  data () {
    return {
      sku: {},
      discountType: 1,
      skuStockType: 1
    }
  },
  methods: {
    discountTypeChange (val) {
      /*
      * 价格类型改变，改变discountType的值，让输入框变化
      * */
      this.discountType = val
    },
    stockTypeChange (val) {
      /*
      * 库存类型发生改变
      * */
      this.skuStockType = val
    },

    handleBeforeUpload (e) {
      /*
      * 剪切图片
      * */
      this.$refs.crop.setImage({e, name: 'sku'})
      return false
    },
    cropImg (data) {
      /*
      * 切图回调方法imgTime, blob, name
      * */
    },

    delSku () {
      /*
      * 删除sku
      * */
      this.$Modal.confirm({
        title: '删除sku',
        content: '你确定删除这个sku吗？',
        onOk: () => {
          // 删除
        }
      })
    }
  },
  props: ['skuData', 'setups'],
  created () {
    for (let i in this.skuData) {
      this.sku[i] = this.skuData[i]
    }
    this.sku.prices = []
    this.setups.forEach(item => {
      this.sku.prices.push({
        branchCustomerId: item.id,
        price: null
      })
    })
  }
}
</script>

<style scoped>
 .box{
   border: 1px solid #dddee1;
   border-radius: 10px;
   padding: 10px;
   margin-bottom: 16px;
   overflow: hidden;
 }
  .bottom_tip{
    position: absolute;
    bottom: 6px;
    left: 0;
  }
</style>
